<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面</title>
    <meta name="description" content="黑马面面">
    <meta name="keywords" content="黑马面面">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入样式 -->
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui.js"></script>
    <!--    <script src="../plugins/jquery/dist/jquery.js"></script>-->
    <script src="../js/data.json"></script>
    <script src="../js/base.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>

<body class="hold-transition">
<!--handleUpdateConfirm 提交修改确定-->
<!--handleUptPwd 修改密码确定-->
<!--密码校验规则-->
<div id="app">
    <div class="content-header common-search-border1">
        <el-button-group>
            <el-button type="primary" @click="changeUpdate()" :disabled="loading" v-if="changeflag"><i
                    class="fa fa-pencil-square-o" aria-hidden="true" aria-disabled="true"></i> 修改个人信息
            </el-button>
            <el-button type="info" class="el-icon-circle-close" @click="handleUpdateCancel()" v-else><i
                    aria-hidden="true" aria-disabled="true"></i> 取消修改信息
            </el-button>
        </el-button-group>
        <el-button type="primary" @click="handleUptPwd()" :disabled="!changeflag"><i
                class="fa fa-pencil-square-o" aria-hidden="true" aria-disabled="true"></i>
            修改密码
        </el-button>
        <!--空一行好看-->
        <div class="box common-search-border1"></div>
    </div>

    <!--第一行结束-->
    <div class="app-container">


        <!--个人信息-->
        <div class="box common-table-border" style="margin:8px 0 0;">
            <el-form label-width="120px" :ref="form" :model="form" :rules="rules" :disabled="loading">
                <el-form-item label="姓名：">
                    <span> {{form.name}}</span>
                </el-form-item>
                <el-form-item label="性别：">
                    <span> {{form.sex}}</span>
                </el-form-item>
                <el-form-item label="邮箱：" prop="email">
                    <el-input v-model="form.email" autocomplete="off" v-if="!changeflag"></el-input>
                    <span v-else> {{form.email}}</span>
                </el-form-item>
                <el-form-item label="手机：" prop="phone">
                    <span v-if="changeflag"> {{form.phone}}</span>
                    <el-input v-model="form.phone" autocomplete="off" v-show="!changeflag"></el-input>
                </el-form-item>
                <el-form-item label="地址：" prop="address">
                    <el-input v-model="form.address" autocomplete="off" v-if="!changeflag"></el-input>
                    <span v-else> {{form.address}}</span>
                </el-form-item>
            </el-form>
            <el-button-group v-if="!loading && !changeflag">
                <el-button type="primary" @click="handleUpdateConfirm">确 定</el-button>
            </el-button-group>
            <el-button v-if="loading" type="primary" :loading="true">确 定</el-button>
        </div>
        <!--修改密码弹窗-->
        <el-dialog title="修改密码" align="center" :visible.sync="dialogpwdVisible" width="40%" top="8vh">
            <el-form label-width="120px" :model="newForm" :rules="uptRules" ref="newForm">
                <el-form-item label="旧密码：" prop="oldPwd">
                    <el-input type="password" v-model="newForm.oldPwd" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input type="password" v-model="newForm.password" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="重复密码：" prop="rePwd">
                    <el-input type="password" v-model="newForm.rePwd" autocomplete="off" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleUptCancel">取 消</el-button>
                <el-button type="primary" @click="handleUptConfirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            // 密码校验规则
            var uptValidatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.newForm.password !== '') {
                        this.$refs.newForm.validateField('rePwd');
                    }
                    callback();
                }
            };
            // 重复密码校验规则
            var uptValidateCheckPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.newForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            // 手机号的验证规则
            var validatePhone = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入联系方式'))
                } else {
                    const reg = /^1[3-9][0-9]\d{8}$/;
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的电话'))
                    }
                }
            }
            // 手机号的验证规则
            var validateEmail = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入邮箱'))
                } else {
                    const reg = /^[\da-z]+([\-\.\_]?[\da-z]+)*@[\da-z]+([\-\.]?[\da-z]+)*(\.[a-z]{2,})+$/i;
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的邮箱'))
                    }
                }
            }

            return {
                // 从seession获取学号
                userName: sessionStorage.getItem("userName"),
                // 个人信息框状态
                changeflag: true,
                // 加载状态
                loading: false,

                tableKey: 0,
                // 分页数据
                pagination: {
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                items: [],
                baseData: base,
                requestParameters: {
                    userName: '',
                    isDis: ''
                },
                //修改密码弹窗
                dialogpwdVisible: false,

                form: {},
                newForm: {},
                rules: {
                    email: [
                        {required: true, validator: validateEmail, trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, validator: validatePhone, trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ]
                },
                uptRules: {
                    oldPwd: [
                        {required: true, message: '请填写', trigger: 'blur'}
                    ],
                    password: [
                        {validator: uptValidatePass, trigger: 'blur'}
                    ],
                    rePwd: [
                        {validator: uptValidateCheckPass, trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getList()
        },
        methods: {
            // 改变修改的状态（完成）
            changeUpdate() {
                this.changeflag = !this.changeflag;
            },
            //修改用户取消
            handleUpdateCancel() {

                // this.items = this.form;
                this.$confirm('此操作将刷新页面，未提交数据将会丢失 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    //刷新页面数据
                    this.getList();
                    this.changeflag = !this.changeflag;
                }).catch(() => {
                    this.$message.info('已取消操作!')
                });

            },
            // 查用户数据（完成）
            getList() {
                axios.post('/user/findByUsername.do?username=' + this.userName).then(res => {
                    if (res.data.flag) {
                        //把用户导入到表单里
                        this.form = res.data.result;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },
            //Enter键查询
            handleFilter() {
                this.getList()
            },
            //清除
            handleRest() {
                this.requestParameters = {
                    userName: '',
                    isDis: ''
                }
            },
            //搜索
            handleSearch() {
                this.getList();
            },
            // 分页用
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.pageNum = 1;
                this.getList();
            },
            // 分页用
            handleCurrentChange(val) {
                this.pagination.pageNum = val;
                this.getList();
            },
            // 修改密码弹窗(完成)
            handleUptPwd() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                // 把弹窗开了
                this.dialogpwdVisible = true;
            },
            // 修改密码确定
            handleUptConfirm() {
                this.items = this.form;
                this.items.password = this.newForm.password;
                axios.post('/user/update.do', this.items).then(res => {
                    // 返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    if (res.data.flag) {
                        // 刷新列表
                        this.getList()
                    }
                })
                // 把弹窗关了
                this.dialogpwdVisible = false;
            },
            //修改密码取消
            handleUptCancel() {
                this.dialogpwdVisible = false;
            },
            // 禁用
            handleDisable(row) {
                console.log(row);
                var t = this;

            },
            //修改用户确定（完成）
            handleUpdateConfirm() {
                // 把状态转回加载中
                this.loading = !this.loading;
                console.log("this.loading" + this.loading);

                axios.post('/user/update.do?', this.form).then(res => {
                    //返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    if (res.data.flag) {
                        // 把加载状态转回正常
                        this.loading = !this.loading;
                        // 把输入框去掉
                        this.changeflag = !this.changeflag;
                        // 刷新列表
                        this.getList();
                    }
                })
            },
            // 删除
            handleDeleted(row) {
                this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    var t = this;
                }).catch(() => {
                    this.$message.info('已取消操作!')
                });
            }
        }
    })
</script>
</html>
